import {useRef,useEffect} from 'react'
import reactDOM from 'react-dom'
import * as dagreD3 from 'dagre-d3';
import * as d3 from 'd3';
import './index.less';
const testData = [
    {
        id:0,
        label:"start",
        target: [1]
    },
    {
        id:1,
        label:"节点1",
        target: [14]
    },

    {
        id:15,
        label:"",
        target: [8,9]
    },
    {
        id:14,
        label:"",
        target: [2,6,15,12]
    },
    {
        id:2,
        label:"节点2",
        target: [16]
    },
    {
        id:16,
        label:"",
        target: [3, 5]
    },
    {
        id:18,
        label:"",
        target: [11]
    },
    {
        id:17,
        label:"",
        target: [18]
    },
    {
        id:3,
        label:"节点3",
        target: [4]
    },
    {
        id:4,
        label:"节点4",
        target: [17]
    },
    {
        id:5,
        label:"节点5",
        target: [17]
    },
    {
        id:6,
        label:"节点6",
        target: [7]
    },
    {
        id:7,
        label:"节点7",
        target: [18]
    },
    {
        id:8,
        label:"节点8",
        target: [10]
    },
    {
        id:9,
        label:"节点9",
        target: [10]
    },
    {
        id:10,
        label:"节点10",
        target: [18]
    },
    {
        id:11,
        label:"节点11",
        target: [13]
    },
    {
        id:12,
        label:"节点12",
        target: [18]
    },
    {
        id:13,
        label:"end",
        target: []
    },
]

const dataFlow = [{
    id: 0,
    label: '事项受理',
    status: 'success',
    target: 1,
    back_target:null
},{
    id: 1,
    label: '初审',
    status: 'success',
    target: 2,
    back_target:null
},{
    id: 2,
    label: '初审回复',
    status: 'success',
    target: 3,
    back_target:null
},{
    id: 3,
    label: '事情打回',
    status: 'fail',
    target: 4,
    back_target: 1
},{
    id: 4,
    label: '事项办结',
    status: 'current',
    target: null,
    back_target:null
},{
    id: 5,
    label: '候审补正',
    status: 'done',
    target: null,
    back_target:null
}]
const App = () => {
    const NodeTree = useRef()
    useEffect(() => {
        const g = new dagreD3.graphlib.Graph().setGraph({})
        g.graph().rankdir = "LR"
        g.graph().marginx = 10;
        g.graph().marginy = 10;
        // g.graph().nodesep = 15
        // g.graph().ranksep = 15
        testData.forEach(({id,label,target}) => {
            g.setNode(id,{
                id, 
                label,
                shape: label == "" ? "circle":"rect"
            });
            
            if(target.length){
                target.forEach((item)=>{
                    g.setEdge(id,item,{
                        arrowhead: "undirected",
                    })
                })
               
            }
         });
         testData.forEach(function({label, id}) {
             if(label == ""){
                const node = g.node(id);
                console.log(node)
                node.width = 0;
                node.height = 0;
                node.opacity= 0;
             }
      
          });
        const svg = d3.select(NodeTree.current); 
        const inner = svg.append("g")
        const zoom = d3.zoom().on("zoom", function() {
            inner.attr("transform",  d3.zoomTransform(svg.node()));
          });
        svg.call(zoom);

        const render = new dagreD3.render(); 
        render(inner, g);
        var initialScale = 0.75;
        svg.call(zoom.transform, d3.zoomIdentity.translate((svg.attr("width") - g.graph().width * initialScale) / 2, 20).scale(initialScale));
        svg.attr("height", Math.floor(g.graph().height + 40));
        svg.attr("width", Math.floor(g.graph().width + 40));
        const xCenterOffset = (svg.attr("width") - g.graph().width) / 2;
        const {height,y}= inner.node().getBoundingClientRect()
        const xOffset = svg.attr("height") - height -y;
        console.log(xOffset)
        inner.attr("transform", "translate(" + xCenterOffset + ", "+ xOffset +")");
    }, [])


    return (
        <div>
            <svg width="1150" height= "500" ref={NodeTree}></svg>
        </div>
    )
}
reactDOM.render(<App />, document.getElementById('root'))